<template>
	<view class="RoomContent">
		<view class="headBox">
			<view class="titleBox">
				<u-notice-bar mode="horizontal" :text='titleWarning' close-icon='true'></u-notice-bar>
			</view>
			<view class="userListBox">
				<view class="itemList">
					<view class="item" v-for="(i,index) in userList" :key="index" @click="soloPay(i)">
						<image class="logo" :src="i.url"></image>
						<view class="text">
							{{i.username}}
						</view>
					</view>
					<view class="item" @click="chashow = true">
						<image class="logo" src="/static/cha.png"></image>
						<view class="text">
							茶水(133111)
						</view>
					</view>
					<view class="item" @click="yaoshow = true">
						<image class="logo" src="/static/add.png"></image>
						<view class="text">
							邀请好友
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="messageListBox" id="main" :style="{height: heightArea}">
			<view class="item tips">
				周润发加入了房间
			</view>
			<view class="item" v-for="i in 10">
				<view class="payMes">
					<text class="blue">周</text>记账给<text class="blue">吴</text>
				</view>
				<view class="payNum">
					<view>￥<text class="red">30</text></view>
					<view class="cha">茶水-￥2</view>
				</view>
			</view>
		</view>
		<view class="btnBox" id="bottom">
			<view class="btn">
				<u-button type="primary" @click="toPage('./roomPayMore')">批量支付</u-button>
			</view>
			<view class="btn">
				<u-button type="warning" @click="toPage('./roomEnd')">结算</u-button>
			</view>
		</view>
		
		
	<!-- 茶水弹窗 -->
		<u-popup :show="chashow" mode="center" @close="closePopup" @open="openPopup" customStyle="width:500rpx;height:700rpx" round="10" overlayOpacity="0.8" closeable="true">
			<view class="in">
				<image class="logo" src="/static/cha.png"></image>
				<text>
					请输入茶水总数额
				</text>
				<view class="inputBox">
					<u--input
					    placeholder="请茶水总数额"
					    border="surround"
					    v-model="proRataNum"
						type="number"
					    @change="change"
					  >
					  </u--input>
				</view>
				<text>
					请抽成比例（%）
				</text>
				<view class="inputBox">
					<u--input
					    placeholder="请输入抽成比例（%）"
					    border="surround"
					    v-model="proRata"
						type="number"
					    @change="change"
					  ></u--input>
					<u-slider v-model="proRata" min="0" max="100" activeColor="#f29100" block-color="#ff9900" inactiveColor="#c0c4cc"></u-slider>
				</view>
				<view class="btn">
					<u-button type="warning">确定</u-button>
				</view>
			</view>
		</u-popup>
	<!-- 邀请好友弹窗 -->
		<u-popup :show="yaoshow" mode="center" @close="closePopup" @open="openPopup" customStyle="width:500rpx;height:600rpx;" round="10" overlayOpacity="0.8" closeable="true">
			<view class="yaoin">
				<view class="title">请扫码二维码加入房间</view>
				<view class="QR">
					1
				</view>
			</view>
		</u-popup>
	<!-- 单独支付弹窗 -->
		<u-popup :show="payshow" mode="center" @close="closePopup" @open="openPopup" customStyle="width:500rpx;height:600rpx;" round="10" overlayOpacity="0.8" closeable="true">
			<view class="payin">
				<image class="logo" :src="payObj.url"></image>
				<view class="inputBox">
					{{payObj.username}}
				</view>
				<view class="inputBox">
					<u--input
					    placeholder="请输入数额"
					    border="surround"
					    v-model="paySoloNum"
						type="number"
					    @change="change"
					  >
					  </u--input>
				</view>
				<view class="btn">
					<u-button type="warning">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleWarning:'简易记账仅提供记录，禁止赌博或其它非法行为',
				userList:[
					{
						id:1,
						url:'/static/logo.png',
						username:'周XXX1'
					},
					{
						id:2,
						url:'/static/logo.png',
						username:'周'
					},
					{
						id:3,
						url:'/static/logo.png',
						username:'周'
					},
					{
						id:4,
						url:'/static/logo.png',
						username:'周'
					}
				],
				heightArea: '',
				chashow:false,
				proRataNum:0,//抽成金额
				proRata:0,//抽成比例
				yaoshow:false,
				payshow:false,
				payObj:{},//单独支付对象
				paySoloNum:0
			}
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('#main').boundingClientRect()
					query.exec(function(res) {
						_this.heightArea = resu.windowHeight - res[0].top + 300 + 'rpx';
						console.log('打印页面的剩余高度', _this.heightArea);
					})
				},
				fail: (res) => {}
			})
		},
		onShow() {
		},
		methods: {
			openPopup(){
				
			},
			closePopup(){
				this.chashow = false
				this.yaoshow = false
				this.payshow = false
			},
			// 单独支付
			soloPay(e){
				this.payObj = e
				this.payshow = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.RoomContent{
		.headBox {
			width: 100%;
			height: 137rpx;
			background-color: #ffffff;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9;
			.userListBox{
				display: flex;
				align-items: center;
				height: 200rpx;
				background-color: #fff;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				.itemList{
					display: flex;
					overflow-x: scroll;
					display: -webkit-box;
					.item{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 10rpx;
						width: 160rpx;
						height: 140rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						.text{
							text-align: center;
							/* 设置颜色 */
							color: black;
							/* 文字大小 */
							font-size: 22rpx;
							/* 设置溢出长度 */
							width: 160rpx;
							/* 文字进行不换行 */
							white-space: nowrap;
							/* 对于溢出的代码进行隐藏 */
							overflow: hidden;
							/* 剪裁后面的代码，并更改为省略号 */
							text-overflow: ellipsis;
						}
						.logo{
							height: 100rpx;
							width: 100rpx;
							border-radius: 50%;
							border: 1px solid #bfbfbf;
						}
					}
				}
			}
		}
		.messageListBox{
			position: absolute;
			left: 0;
			top: 280rpx;
			width: 100%;
			margin-top: 10rpx;
			height: 300rpx;
			overflow-y: scroll;
			.item{
				width: 98%;
				height: 80rpx;
				line-height: 80rpx;
				margin: 10rpx auto;
				display: flex;
				justify-content: space-between;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				.payMes{
					.blue{
						color: #2b85e4;
					}
				}
				.payNum{
					line-height: 40rpx;
					display: flex;
					flex-direction: column;
					text-align: right;
					.red{
						color:#fa3534;
					}
					.cha{
						color:#bfbfbf;
					}
				}
			}
			.tips{
				height: 30rpx;
				line-height: 30rpx;
				max-width: 35%;
				min-width: 10%;
				background-color: #bfbfbf;
				color: #fff;
				margin: auto;
				border:none;
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				font-size: 26rpx;
				padding: 10rpx;
				/* 文字进行不换行 */
				white-space: nowrap;
				/* 对于溢出的代码进行隐藏 */
				overflow: hidden;
				/* 剪裁后面的代码，并更改为省略号 */
				text-overflow: ellipsis;
			}
		}
		.btnBox{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 67rpx;
			// opacity: 0.3;
			display: flex;
			.btn{
				width: 50%;
			}
		}
		.in{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.logo{
				height: 300rpx;
				width: 300rpx;
			}
			.inputBox{
				width: 85%;
				margin: auto;
				margin-bottom: 10rpx;
			}
			.btn{
				width: 80%;
			}
		}
		.yaoin{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.title{
				margin-top: 50rpx;
			}
			.QR{
				height: 460rpx;
				width: 460rpx;
				background-color: sandybrown;
			}
		}
		.payin{
			margin-top: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.logo{
				height: 200rpx;
				width: 200rpx;
				border-radius: 50%;
				border:1px solid black
			}
			.inputBox{
				text-align: center;
				width: 85%;
				margin-bottom: 20rpx;
				/* 文字进行不换行 */
				white-space: nowrap;
				/* 对于溢出的代码进行隐藏 */
				overflow: hidden;
				/* 剪裁后面的代码，并更改为省略号 */
				text-overflow: ellipsis;
			}
			.btn{
				width: 85%;
			}
		}
		
	}
</style>